/**
 * Created by tz on 2018/12/27.
 */
import React, { Component } from 'react';
import {Form, Card, Button, Input, Popconfirm,Select,Radio,message} from 'antd';
import NotificationService from '../../service/NotificationService';
import StudentService from '../../service/StudentService';
const Option = Select.Option;
const RadioGroup = Radio.Group;
export default class NotificationEdit extends Component {

    state = {
        title:'Notification新增',
        tableData:[],
        loading:false,
        formItems: [
            {name:'通知模式',type:'radio',fieldName:'targetUserId',required:true},
            {name: '通知账号', type: 'select', fieldName: 'targetUserId', required: true},
            {name: '内容', type: 'input', fieldName: 'content', required: true}
        ],
        data:{},
        studentList:[],
        notificationType:0
    };

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        let id = this.props.match.params.id;
        if(id){
            this.setState({title:'Notification修改'});
            this.fetch(id);
        }
        StudentService.getList({size: 1000}).done((res)=>{
            console.log(res.entity);
            this.setState({studentList:res.entity})
        })
    }

    fetch(id){
        this.setState({
            loading: true
        });
        NotificationService.getOne(id).done((res)=>{
            console.log(res.entity);
            this.setState({data:res.entity,loading: false})
        })
    }

    //页面check
    check(){
        this.state.error = false;

        //标题check
        if (this.state.notificationType === null || this.state.notificationType === '' || typeof this.state.notificationType === 'undefined') {
            this.state.error = true;
            message.error("请选择通知模式！");
            return
        }
        //账号check
        if (this.state.data.targetUserId === null || this.state.data.targetUserId === '' || typeof this.state.data.targetUserId === 'undefined') {
            this.state.error = true;
            message.error("请输入通知账号！");
            return
        }

        //内容check
        if (this.state.data.content === null || this.state.data.content === '' || typeof this.state.data.content === 'undefined') {
            this.state.error = true;
            message.error("请输入内容！");
            return
        }
        if (this.state.data.content.length > 255) {
            this.state.error = true;
            message.error("内容最多只能输入255个文字！");
            return
        }
    }


    save(){
        this.check();
        if (this.state.error === false) {
            let id = this.props.match.params.id;
            if (id) {
                NotificationService.updateOne(this.state.data).done((res) => {
                    console.log(res);
                    this.props.history.goBack();
                })
            } else {
                NotificationService.addOne(this.state.data).done((res) => {
                    console.log(res);
                    this.props.history.goBack();
                })
            }
        }
    }

    //页面渲染
    render() {
        return (
            <Card title={this.state.title}>
                <Form>
                    {this.state.formItems.map((item,i)=>{
                        if(item.type==='input'){
                            return(
                                <Form.Item
                                    label={item.name}
                                    key={i}
                                >
                                    <Input placeholder={"请输入"+item.name} value={this.state.data[item.fieldName]} onChange={(e)=>{
                                        this.state.data[item.fieldName] = e.target.value;
                                        this.forceUpdate();
                                    }}/>
                                </Form.Item>
                            )
                        } else if (item.type==='radio') {
                            return(
                                <Form.Item
                                    label={'通知模式：'}
                                    key={i}>
                                <RadioGroup  onChange={(e)=>{
                                    this.state.data[item.fieldName] = e.target.value;;
                                    this.forceUpdate();
                                }}>
                                    <Radio checked={ this.state.notificationType === "0" ? true : false } value="0">全员通知</Radio>
                                    <Radio checked={ this.state.notificationType === "1" ? true : false } value="1">个人通知</Radio>
                                </RadioGroup>
                                </Form.Item>
                            );
                        } else if (item.type ==='select') {
                            return(
                                <Form.Item layout="inline" label={'登录账号：'} key={i}>
                                        <Input placeholder={"请输入"+item.name} value={this.state.data[item.fieldName]} onChange={(e)=>{
                                            this.state.data[item.fieldName] = e.target.value;
                                            this.forceUpdate();
                                        }}/>
                                </Form.Item>
                            )
                        }
                    })}
                    <Form.Item>
                        <Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否确定保存?" onConfirm={() =>{
                            this.save();
                        }}>
                            <Button type="primary" icon="save">保存</Button>
                        </Popconfirm>

                    </Form.Item>
                </Form>
            </Card>
        );
    }
}